<template>
    <div>
      <Home_head />
      <div class="personalCenter">
        <div class="user_info">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <span class="user_name">{{ userName }}</span>
          <span class="user_note">{{ userNote }}</span>
        </div>
        <div class="navigationBar">
          <span class="bar">文章</span>
          <span style="position: absolute; right: 50px;">关注：{{ attentionNum }}</span>
          <span style="position: absolute; right: 140px;">粉丝: {{ fansNum }}</span>
          <button style="position: absolute; right: 6px; background-color: #89b8ed; border: 0px; border-radius: 3px;" @click="Attention()" v-if="!isattention"> <span>关注</span> </button>
          <button style="position: absolute; right: 6px; background-color: #1fe97a; border: 0px; border-radius: 3px;" @click="unAttention()" v-if="isattention"> <span>已关注</span> </button>
        </div>
        <Blogger_card :userName="this.$route.query.userName"></Blogger_card>
      </div>
    </div>
  </template>
  
  <script>
  import Home_head from "@/components/Home_head.vue";
  import Blogger_card from "@/components/Blogger_card.vue";
  import axios from "axios"
  var token = localStorage.getItem("user_Token");
  export default {
    components: {
      Home_head,
      Blogger_card,
    },
    data() {
      return {
        isattention:true,
        attentionNum:Number,
        fansNum:Number,
        userName:"",
        userNote:"",
        imageUrl:"",
      };  
    },
    mounted:function(){
        this.Initialization();
        this.isAttention();
    },
    methods: {
        Initialization(){
            axios.post("/BloggerInitialization",{userName: this.$route.query.userName}).then((response)=>{
                this.userNote=response.data.userNote
                this.attentionNum=response.data.attentionNum
                this.fansNum=response.data.fansNum
                this.imageUrl=response.data.userHead
                this.userName=response.data.userName
            })
        },
        Attention(){
            axios.post("/UserAttention",
            {userName: this.$route.query.userName,
            userToken: token,
            }).then((response)=>{
                this.fansNum=response.data
                this.isattention=true;
                this.$message({
                  message: '关注成功',
                  type: 'success'});
            })
        },
        unAttention(){
            axios.post("/UserUnAttention",
            {userName: this.$route.query.userName,
            userToken: token,
            }).then((response)=>{
                this.fansNum=response.data
                this.isattention=false;
                this.$message({
                  message: '取关成功',
                  type: 'success'});
            })
        },
        isAttention(){
            axios.post("/isAttention",
            {userName: this.$route.query.userName,
            userToken: token,
            }).then((response)=>{
                this.isattention=JSON.parse(response.data);
            })
        }
    },
  };
  </script>
  
  <style>
  .personalCenter {
    position: absolute;
    top: 50px;
    left: 350px;
    background-color: #ffffff;
    width: 900px;
    height: 800px;
  }
  .navigationBar{
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-bottom: #000000 solid 1.5px;
  }
  .user_info {
    display: block;
    background-image: url(../assets/580cbb24aff1e6005043fb5b9c216.jpg);
    height: 300px;
  }
  .user_name {
    position: absolute;
    left: 130px;
    top: 155px;
    font-size: 23px;
    color: #000000;
  }
  .user_note {
    position: absolute;
    left: 130px;
    top: 190px;
  }
  .bar{
      color: #000000;
      margin-left: 30px;
  }
  
  .avatar {
    position: absolute;
    left: 20px;
    top: 150px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
  }
  </style>